::-webkit-scrollbar
    width 0.75rem
    height 0.75rem
::-webkit-scrollbar-track
    background rgba(text, 0.17)
    border-radius br
::-webkit-scrollbar-thumb
    border-radius br
    background: rgba(text, 0.27)
    {trans}
    &:hover
        background rgba(text, 0.5)
    &:active
        background rgba(text, 0.35)
::-webkit-scrollbar-track:window-inactive
    background rgba(text, 0.1)
::-webkit-scrollbar-corner
    background transparent

input[type="text"],
input[type="number"],
input[type="url"],
input[type="password"],
select,
textarea
    padding 0.1em 0.8em
    background background
    border 1px solid borderPale
    border-radius br
    font inherit
    color inherit
    {trans}
    &:hover
        border-color borderBright
        {transshort}
    &:focus
        border-color acttext
    .compact
        padding 0.2em 0.3em
        line-height 1
    &.invalid
        border-color error
    &.code
        font-family font-mono

input[type="text"],
input[type="number"],
input[type="url"],
input[type="password"]
    &.compact
        max-width 8em
        &.wide
            max-width 100%

input[type="number"]
    padding-right 0
input.color
    transition 0

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button
    padding 0.5em 1em
    margin 0 0.3em 0 0
    border 1px solid act
    color acttext
    font inherit
    font-weight 400
    border-radius br
    background background
    if (themeDark)
        background transparent
        &.forcebackground
            background rgba(background, 0.65)
    display inline-block
    cursor pointer
    text-align center
    {trans}
    &:hover, &.active, &:focus
        background acttext
        color background
        {transshort}
        svg
            color background
        if (!themeDark)
            border-color accent1
        if (themeDark)
            color foreground
            svg
                color foreground
    &:active, &.selected
        {transshort}
        border-color accent1
        background accent1
        color background
        svg
            color background
        if (themeDark)
            color foreground
            svg
                color foreground
    &.inline
        padding 0.2em 0.8em
        display inline-block
    &.vertical
        padding 1em 0
    &.square
        padding 0.7em
        line-height 1
    &.tiny
        padding 0.35rem
        line-height 1em
        svg
            width 1rem
            height 1rem
    &.square.inline
        padding 0.3em
        margin-left 0
    &.wide + &.wide
        margin-top 0.5rem
    .flexrow > &.wide + &.wide
        margin-top 0
    helper = {
        error: error,
        success: success,
        warning: warning
    }
    for i, j in helper
        &.{i}
            border-color j
            svg
                color j
            &:hover, &:active, &:active, &.selected, &:focus
                background-color j
                color background
                svg
                    color background

.aSearchWrap
    position relative
    display inline-block
    svg
        width 1.5rem
        height 1.5rem
        position absolute
        right 0.5rem
        top 50%
        transform translate(0, -50%)

/* Large checkbox/toggle as seen in the modules tab */
.bigpower
    cursor pointer
    display block
    float left
    width 4em
    height @width
    border-radius 50% 10% 50% 50%
    background -webkit-linear-gradient(top, background 0, borderPale 100%)
    box-shadow 0 0 0.2em backgroundDeeper inset
    border 1px solid borderBright
    if (themeDark)
        border-color act
    text-align center
    position relative
    &:after
        display block
        width 7px
        height 7px
        position absolute
        top 4px
        right 4px
        border-radius 100%
        content " "
        background success
    svg
        width 3.5rem
        height 3.5rem
        padding 0.75rem
        margin 0.25rem
        display block
        position relative
        border-radius 100%
        border 1px solid
        box-sizing border-box
        background -webkit-linear-gradient(top, borderPale 0, background 100%)
        color success
    span
        position absolute
        left 50%
        top 50%
        -webkit-animation rotate 1s infinite linear
        animation rotate 1s infinite linear
        &:after
            display block
            width 0.2em
            height 0.2em
            position absolute
            left 50%
            border-radius 100%
            top 50%
            margin -0.05em
            margin-left -1.8em
            content " "
            background success
    &.off
        if (themeDark)
            border-color error
        span
            display none
        span:after
            background error
        svg
            color error
        &:after
            background error

.aButtonGroup
    display inline-flex
    margin 0 0.5em
    button, .button
        margin 0
        border-radius 0
        border-right-width 0
        &:first-child
            border-top-left-radius br
            border-bottom-left-radius br
        &:last-child
            border-top-right-radius br
            border-bottom-right-radius br
            border-right-width 1px
            if themeThickBorders
                border-right-width 2px
    &.wide
        display flex
        margin 0
        button, .button
            flex 1 1 auto
    &.vertical
        flex-flow column nowrap
        button, .button
            margin 0
            border-radius 0
            border-bottom-width 0
            border-right-width 1px
            if themeThickBorders
                border-right-width 2px
            @extend button.square
            &:first-child
                border-top-left-radius br
                border-top-right-radius br
            &:last-child
                border-bottom-left-radius br
                border-bottom-right-radius br
                border-bottom-width 1px
                if themeThickBorders
                    border-bottom-width 2px
.aButtonGroupNine
    display inline-grid
    grid-template-columns 1fr 1fr 1fr
    gap -1px
    button, .button
        margin 0
        border-radius 0
        @extend button.square
        &:first-child
            border-top-left-radius br
        &:nth-child(3)
            border-top-right-radius br
        &:nth-child(7)
            border-bottom-left-radius br
        &:last-child
            border-bottom-right-radius br
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.aNav
    svg
        {trans}
        color act
        &:first-child
            margin-right 0.5em
        &:only-child
            margin-right 0

select, label, .label
    cursor pointer
select
    line-height 2
    height calc(2.2rem + 2px)

[type="range"]
    min-height 1.5em
    background transparent
    font inherit
    width 100%
[type="range"], [type="range"]::-webkit-slider-thumb
    -webkit-appearance none

[type="range"]::-webkit-slider-runnable-track
    box-sizing border-box
    border 1px solid borderBright
    border-radius br
    width 100%
    height 0.75em
    background backgroundDeeper

thumbWidth = 1.5em
[type="range"]::-webkit-slider-thumb
    margin-top -0.425em
    box-sizing border-box
    border 0
    width thumbWidth
    height thumbWidth
    border-radius 50%
    background act
    z-index 2
    position relative

// Regular range inputs should be wrapped into .aSliderWrap

.aSliderWrap
    display flex
    align-items center
    position relative
    width 100%
    height 2em
    font 1em/1 sans-seri

.aSliderWrap [type="range"]
    flex 1
    margin 0
    padding 0

.DataTicks
    position absolute
    left (thumbWidth / 2) // pad by half oh thumb's width
    right (thumbWidth / 2)
    top 50%
    margin-top -0.375rem
    user-select none
    pointer-events none
.aDataTick
    width 1px
    height 0.75rem
    background borderBright
    position absolute

label, .label
    & + label, & + .label
        margin-top 0.5rem
    &.file
        display block
        position relative
        [type="file"]
            display none

fieldset
    margin-bottom 0.5rem
    &:last-child
        margin-bottom 0

.checkbox
    position relative
    padding-left 1.5rem
    margin-top 0
    display block
    [type="checkbox"], [type="radio"]
        -webkit-appearance none
        appearance none
        margin 0
        width 1rem
        height 1rem
        left 0
        top 0.5rem
        border 1px solid act
        &.invalid
            border-color error
        box-sizing border-box
        position absolute
        border-radius br
        {trans}
        &::after
            content ''
            icon(check, background)
            // a hack to fix pixelization of icons in certain context menus
            transform scale(1)
            width 0.85rem
            height 1rem
            position absolute
            top -0.035rem
            left -0.045rem
            line-height 1
            color background
            opacity 0
            {trans}
        &:checked
            background act
            border-color accent1
            {transshort}
            &::after
                {transshort}
                opacity 1
    [type="radio"]
        border-radius 100%
fieldset
    border 0
    padding 0
    margin 0
    & + fieldset
        margin-top 1rem
    button
        margin-top 0.5rem
    & > button
        &:first-child
            margin-top 0

// Range inputs with stacked backgrounds, for usage with color pickers

.aRangePipeStack input[type="range"]
    -webkit-appearance none
    background transparent
    margin 8px 0
    &:focus
        outline 0
    &::-webkit-slider-runnable-track
        width 100%
        height 24px
        cursor pointer
        background backgroundDeeper
        border-radius br
        border 1px solid borderBright
    &::-webkit-slider-thumb
        border 1px solid borderBright
        height 40px
        width 19px
        border-radius br
        background background
        if (themeDark)
            background backgroundDeeper
        cursor pointer
        -webkit-appearance none
        margin-top -9px
    &:focus::-webkit-slider-runnable-track
        background background
    &.transparent
        &::-webkit-slider-runnable-track, &:focus::-webkit-slider-runnable-track
            background transparent
.aRangePipeStack
    position relative
    height 40px
    input
        position absolute
        left 0
        right 0
        top 0
    .pipe
        position absolute
        left 0
        right 0
        top 9px
        height 22px
        border-radius br

.aDragger
    width 0.75rem
    height 0.75rem
    position absolute
    transform translate(-50%, -50%)
    background act
    border-radius 100%
    cursor move
    {shad}
    &.selected
        box-shadow 0 0 0 2px borderPale, 0 0 0 4px act, 0 0.1rem 0.2rem 4px rgba(0, 0, 0, 0.5)

.aClicker
    height 0.75rem
    position absolute
    transform translate(0, -50%)
    transform-origin left center
    cursor copy
    margin 1rem

.aDropzone
    @extends .middle
    position fixed
    left 0
    right 0
    top 0
    bottom 0
    background rgba(background, 0.65)
    border 0.5rem solid act
    animation aDropzonePulsate 1.25s ease-in-out infinite
    text-align center
    svg
        color accent1
        width 5rem
        height 5rem
        stroke-width 1px
    h2
        font-size 2rem
    input
        position absolute
        left 0
        top 0
        width 100%
        height 100%
        opacity 0
        cursor -webkit-grabbing

@keyframes aDropzonePulsate
    0%, 100%
        border 0.5rem solid act
    50%
        border 0.5rem solid rgba(act, 0.35)

.aResizer
    background backgroundDeeper
    if (darkTheme)
        background background // should be greyish on all themes
    flex 0 0 auto
    width 0.75rem
    height 0.75rem
    border 1px solid borderBright
    position relative
    cursor move
    &::before
        content ''
        width 1.5rem
        height 2px
        box-sizing content-box
        border 1px solid borderPale
        if (themeDark)
            border 1px solid borderBright
        border-left 0
        border-right 0
        position absolute
        left 50%
        top 50%
        transform translate(-50%, -50%)
    &.vertical
        height 100%
        border-top 0
        border-bottom 0
        cursor ew-resize
        &::before
            transform translate(-50%, -50%) rotate(90deg)
    &.horizontal
        width 100%
        border-right 0
        border-left 0
        cursor ns-resize

.aPoint2DInput
    display flex
    flex-flow row nowrap
    width 20rem
    max-width 100%
    label
        flex 1 1 auto
    input
        max-width 100%
        width calc(100% - 3rem)
    &.compact
        width 15rem
    &.wide
        width 100%
    span
        margin-right 0.5rem
    .aSpacer
        flex 0 0 auto

.anActionableIcon
    color act
    {trans}
    opacity 0.35
    cursor pointer
    margin 0
    display inline-block
    font-family Iosevka
    &:hover, &:focus, .aMenu li:hover &, .aMenu li:focus &, tr:hover &
        opacity 1
    & + &
        margin-left 0.35rem
